<template>
  <div>
    <div
      v-for="blog in blogArray"
      :key="blog.id"
      id="noteList"
      class="ui attached segment"
      style="width: 1000px; margin-left: 200px"
    >
      <div class="ui padded vertical segment m-padded-tb-large">
        <div class="ui middle aligned mobile reversed stackable grid">
          <div class="eleven wide column">
            <h3 class="ui header">
              <a
                style="color: #0f0f0f"
                :href="'#/blogComment?id=' + blog.id"
                target="_self"
                class="m-black"
                >{{ blog.title }}</a
              >
            </h3>
            <p class="m-text">
              {{ blog.content }}
            </p>
            <div class="ui grid">
              <div class="eleven wide column">
                <div class="ui mini horizontal link list">
                  <div class="item">
                    <img
                      :src="'http://localhost:8081/blog' + blog.uimg"
                      alt=""
                      class="ui avatar image"
                    />
                    <div class="content">
                      <a :href="'#/userDetail?id='+blog.uid" class="header">{{ blog.nickname }}</a>
                    </div>
                  </div>
                  <div class="item">
                    <i class="calendar icon"></i
                    ><span>{{ blog.create_time.split("T")[0] }}</span>
                  </div>
                  <div class="item">
                    <i class="eye icon"></i> <span>{{ blog.views }}</span>
                  </div>
                </div>
              </div>
              <div class="right aligned five wide column">
                <a
                  href="#"
                  target="_self"
                  class="ui teal basic label m-padded-tiny m-text-thin"
                  >{{ blog.type_name }}</a
                >
              </div>
            </div>
          </div>

          <div class="five wide column">
            <img
              :src="'http://localhost:8081/blog' + blog.img"
              alt=""
              class="ui rounded image"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from "@/eventBus.js";

export default {
  data() {
    return {
      blogArray: [],
      total: 1,
    };
  },
  created() {
    bus.$on("share", (val) => {
      this.blogArray = val.blog;
      this.total = val.total;
      this.totall();
    });
  },
  methods: {
    totall() {
      this.$emit("total", this.total);
    },
  },
};
</script>

<style>
</style>